<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tauri App</title>
    <script type="module" src="/main.js" defer></script>
    <style>
      .logo.vite:hover {
        filter: drop-shadow(0 0 2em #747bff);
      }

      .logo.typescript:hover {
        filter: drop-shadow(0 0 2em #2d79c7);
      }
      html, body {
        width: 100%;
        height: 100%;   
        overflow: hidden; 
      }
      #svg {
          width:100%; 
          height:100%; 
          position:absolute; 
          top:0; 
          left:0; 
          bottom: 0;
          z-index:-1;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <h1>Welcome to Tauri!</h1>

      <div class="row">
        <a href="https://tauri.app" target="_blank">
          <img src="/assets/tauri.svg" class="logo tauri" alt="Tauri logo" />
        </a>
        <a
          href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"
          target="_blank"
        >
          <img
            src="/assets/javascript.svg"
            class="logo vanilla"
            alt="JavaScript logo"
          />
        </a>
      </div>

      <p>Click on the Tauri logo to learn more about the framework</p>

      <form class="row" id="greet-form">
        <input id="greet-input" placeholder="Enter a name..." />
        <button type="submit">Greet</button>
      </form>

      <p id="greet-msg"></p>
    </div>
    <svg id="svg"  xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150"><defs><linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="5%" stop-color="#002bdc88"></stop><stop offset="95%" stop-color="#32ded488"></stop></linearGradient></defs><path d="M 0,600 C 0,600 0,200 0,200 C 106.97607655502392,193.7224880382775 213.95215311004785,187.44497607655504 308,190 C 402.04784688995215,192.55502392344496 483.16746411483246,203.94258373205741 583,197 C 682.8325358851675,190.05741626794259 801.377990430622,164.78468899521533 893,183 C 984.622009569378,201.21531100478467 1049.3205741626793,262.9186602870813 1136,273 C 1222.6794258373207,283.0813397129187 1331.3397129186603,241.54066985645935 1440,200 C 1440,200 1440,600 1440,600 Z" stroke="none" stroke-width="0" fill="url(#gradient)" class="transition-all duration-300 ease-in-out delay-150 path-0"></path><defs><linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="5%" stop-color="#002bdcff"></stop><stop offset="95%" stop-color="#32ded4ff"></stop></linearGradient></defs><path d="M 0,600 C 0,600 0,400 0,400 C 76.22966507177034,431.28229665071774 152.45933014354068,462.5645933014354 260,468 C 367.5406698564593,473.4354066985646 506.3923444976076,453.02392344497605 619,432 C 731.6076555023924,410.97607655502395 817.9712918660288,389.3397129186603 908,385 C 998.0287081339712,380.6602870813397 1091.7224880382773,393.61722488038276 1181,399 C 1270.2775119617227,404.38277511961724 1355.1387559808613,402.1913875598086 1440,400 C 1440,400 1440,600 1440,600 Z" stroke="none" stroke-width="0" fill="url(#gradient)" class="transition-all duration-300 ease-in-out delay-150 path-1"></path></svg>
  </body>
</html>
